<template>
  <el-form-item
    :prop="prop"
    :label="label">
    <el-date-picker
      v-model="value"
      :type="type"
      :placeholder="placeholder"
      :clearable="clearable"
      :disabled="disabled"
      :editable="editable"
      :format="format"
      :valueFormat="valueFormat"
      @blur="handleBlur"
      @focus="handleFocus"
      @change="handleChange"
      @panel-change="panelChange"
      @visible-change="visibleChange"
    >

    </el-date-picker>
  </el-form-item>
</template>

<script setup lang="ts" name="BaseDate">
import { computed } from 'vue'
let props = withDefaults(defineProps<{
    prop?: string,
    label?: string,
    type?: string,
    editable?: boolean,
    clearable?: boolean,
    placeholder?: string,
    disabled?: boolean,
    format?: string,
    valueFormat?: string,
    modelValue: any
  }>(), {
    modelValue: '',
    valueFormat: "YYYY/MM/DD"
  })
let emits = defineEmits(['visibleChange', 'panelChange', 'focus', 'blur', 'change', 'update:modelValue'])

const value = computed({ // 重新定义
  get: () => props.modelValue,
  set: (value: string) => emits("update:modelValue", value),
})

// 失焦事件
function handleBlur (event: FocusEvent) {
  emits('blur', event)
}
// 获得焦点事件
function handleFocus (event: FocusEvent) {
  emits('focus', event)
}
// 内容改变事件
function handleChange (val: any) {
  emits('change', val)
}
// 日期框显示隐藏时触发
function visibleChange (val: any) {
  emits('visibleChange', val)
}
// 面板日期改变时触发
function panelChange (val: boolean) {
  emits('panelChange', val)
}

</script>

<style lang="less" scoped>
 .container {
 }
</style>
